<template>
  <div class="topic-tags" :class="{ 'not-clickable': !clickable }">
    <el-tag
      v-for="topic in displayTopics"
      :key="topic.id"
      :type="tagType"
      :size="size"
      :closable="closable"
      :effect="effect"
      class="topic-tag"
      @click="handleClick(topic)"
      @close="handleClose(topic)"
    >
      <el-icon v-if="showIcon" class="tag-icon"><CollectionTag /></el-icon>
      {{ topic.name }}
    </el-tag>

    <!-- 显示更多话题数量 -->
    <el-tag
      v-if="hiddenCount > 0"
      :type="tagType"
      :size="size"
      :effect="effect"
      class="topic-tag more-tag"
    >
      +{{ hiddenCount }}
    </el-tag>
  </div>
</template>

<script setup>
import {computed} from 'vue'

const props = defineProps({
  topics: {
    type: Array,
    default: () => []
  },
  tagType: {
    type: String,
    default: 'info',
    validator: (value) => ['primary', 'success', 'info', 'warning', 'danger'].includes(value)
  },
  size: {
    type: String,
    default: 'default',
    validator: (value) => ['large', 'default', 'small'].includes(value)
  },
  closable: {
    type: Boolean,
    default: false
  },
  effect: {
    type: String,
    default: 'light',
    validator: (value) => ['dark', 'light', 'plain'].includes(value)
  },
  showIcon: {
    type: Boolean,
    default: false
  },
  clickable: {
    type: Boolean,
    default: true
  },
  maxDisplay: {
    type: Number,
    default: 0 // 0表示显示全部
  }
})

const emit = defineEmits(['click', 'close'])

const displayTopics = computed(() => {
  if (props.maxDisplay > 0 && props.topics.length > props.maxDisplay) {
    return props.topics.slice(0, props.maxDisplay)
  }
  return props.topics
})

const hiddenCount = computed(() => {
  if (props.maxDisplay > 0 && props.topics.length > props.maxDisplay) {
    return props.topics.length - props.maxDisplay
  }
  return 0
})

const handleClick = (topic) => {
  if (props.clickable) {
    emit('click', topic)
  }
}

const handleClose = (topic) => {
  emit('close', topic)
}
</script>

<style lang="scss" scoped>
.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  
  .topic-tag {
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .tag-icon {
      margin-right: 4px;
      font-size: 12px;
    }
  }
  
  .more-tag {
    cursor: default;
    
    &:hover {
      transform: none;
      box-shadow: none;
    }
  }
}

// 不可点击状态
.topic-tags.not-clickable {
  .topic-tag {
    cursor: default;
    
    &:hover {
      transform: none;
      box-shadow: none;
    }
  }
}

// 不同尺寸的间距调整
.topic-tags.size-small {
  gap: 6px;
}

.topic-tags.size-large {
  gap: 10px;
}
</style>
